<template>
	<view class="index-container">

		<!-- 横幅区域 -->
		<view class="banner">
			<view class="banner-content">
				<view class="banner-title">环保回收，从我做起</view>
				<view class="banner-subtitle">旧衣回收，积分兑换，共创绿色未来</view>
			</view>
		</view>

		<!-- 功能入口网格 -->
		<view class="action-grid">
			<view class="action-item" @click="switchTab('/pages/recycle/index')">
				<view class="action-icon-bg">
					<image class="action-icon" src="/static/images/icons/calendar.svg" mode="aspectFit"></image>
				</view>
				<text class="action-text">预约回收</text>
			</view>
			<view class="action-item" @click="navigateTo('/pages/recycle/nearby')">
				<view class="action-icon-bg">
					<image class="action-icon" src="/static/images/icons/location.svg" mode="aspectFit"></image>
				</view>
				<text class="action-text">附近回收点</text>
			</view>
			<view class="action-item" @click="switchTab('/pages/points/index')">
				<view class="action-icon-bg">
					<image class="action-icon" src="/static/images/icons/gift.svg" mode="aspectFit"></image>
				</view>
				<text class="action-text">积分商城</text>
			</view>
			<view class="action-item" @click="navigateTo('/pages/recycle/order-detail')">
				<view class="action-icon-bg">
					<image class="action-icon" src="/static/images/icons/history.svg" mode="aspectFit"></image>
				</view>
				<text class="action-text">回收订单</text>
			</view>
		</view>

		<!-- 回收分类 -->
		<view class="section">
			<view class="section-header">
				<text class="section-title">回收分类</text>
				<view class="section-more" @click="navigateTo('/pages/categories/index')">
					<text class="more-text">查看全部</text>
					<text class="more-icon">></text>
				</view>
			</view>
			<view class="category-grid">
				<view class="category-item" v-for="(item, index) in categories" :key="index"
					@click="showCategoryDetail(item)">
					<view class="category-icon-bg">
						<image class="category-icon" :src="item.image" mode="aspectFit"></image>
					</view>
					<text class="category-name">{{ item.name }}</text>
				</view>
			</view>
		</view>

		<!-- 用户成就数据 -->
		<view class="section achievements-section">
			<view class="section-header">
				<text class="section-title">环保成就</text>
				<text class="section-subtitle">您的环保贡献</text>
			</view>
			<view class="achievements-list" v-if="isLoggedIn">
				<view class="achievement-item" v-for="(item, index) in achievements" :key="index">
					<text class="achievement-value">{{ item.value }}</text>
					<text class="achievement-label">{{ item.label }}</text>
				</view>
			</view>
			<view class="not-logged-in-tip" v-else>
				<text class="tip-text">登录后查看您的环保贡献</text>
				<button class="login-btn" @tap="navigateTo('/pages/login/index')">去登录</button>
			</view>
		</view>

		<!-- 最近订单 -->
		<view class="section recent-orders-section">
			<view class="section-header">
				<text class="section-title">最近订单</text>
				<text class="section-more" v-if="isLoggedIn" v-auth:tap="viewOrders">查看更多</text>
				<text class="section-more" v-else @tap="navigateTo('/pages/login/index')">去登录</text>
			</view>
			<view class="recent-orders-list" v-if="isLoggedIn && recentOrders.length > 0">
				<view class="order-item" v-for="(order, index) in recentOrders" :key="index"
					@tap="navigateTo('/pages/recycle/order-detail?id=' + order.id)">
					<view class="order-info">
						<text class="order-id">订单号：{{ order.id }}</text>
						<text class="order-status">{{ order.status }}</text>
					</view>
					<view class="order-detail">
						<text class="order-date">{{ order.date }}</text>
						<text class="order-points">+{{ order.points }}积分</text>
					</view>
				</view>
			</view>
			<view class="empty-orders" v-else-if="isLoggedIn && recentOrders.length === 0">
				<text class="empty-text">暂无回收订单</text>
				<button class="recycle-now-btn" @tap="goToRecycle">立即回收</button>
			</view>
			<view class="not-logged-in-tip" v-else>
				<text class="tip-text">登录后查看您的回收订单</text>
				<button class="login-btn" @tap="navigateTo('/pages/login/index')">去登录</button>
			</view>
		</view>

		<!-- 环保小知识 -->
		<view class="section tips-section">
			<view class="section-header">
				<text class="section-title">环保小知识</text>
			</view>
			<view class="tips-content">
				<text>{{ environmentalTip }}</text>
			</view>
		</view>


	</view>
</template>

<script>
import authMixin from '../../mixins/auth-mixin.js';
import { isLoggedIn, getUserInfo } from '../../utils/auth.js';

export default {
	mixins: [authMixin],
	data() {
		return {
			// 回收分类数据
			categories: [
				{ name: '衣物', image: '/static/images/categories/clothes.svg' },
				{ name: '鞋包', image: '/static/images/categories/bags.svg' },
				{ name: '家纺', image: '/static/images/categories/textiles.svg' },
				{ name: '玩具', image: '/static/images/categories/toys.svg' }
			],
			// 环保成果数据
			achievements: [
				{ value: '128', label: '回收衣物(kg)' },
				{ value: '56', label: '减少碳排放(kg)' },
				{ value: '12', label: '节约水资源(t)' }
			],
			// 最近订单数据
			recentOrders: [
				{
					orderNo: 'R20230615001',
					appointmentTime: '2023-06-15 14:00-16:00',
					address: '北京市朝阳区建国路88号',
					category: '衣物',
					weight: '预估5kg',
					points: 50,
					status: 1,
					statusText: '进行中',
					statusClass: 'status-processing'
				},
				{
					orderNo: 'R20230610002',
					appointmentTime: '2023-06-10 10:00-12:00',
					address: '北京市海淀区中关村大街号',
					category: '鞋包',
					weight: '实际3kg',
					points: 30,
					status: 2,
					statusText: '已完成',
					statusClass: 'status-completed'
				}
			],
			// 环保小知识
			environmentalTip: '你知道吗？一件棉T恤的生产需要消耗2700升水，相当于一个人3年的饮水量。通过旧衣回收，我们可以大大减少资源消耗和环境污染。',
			// 登录状态
			isLoggedIn: false,
			// 用户信息
			userInfo: null
		};
	},
	onLoad() {
		this.init();
	},
	onShow() {
		this.updateLoginStatus();
	},
	methods: {
		// 初始化数据
		init() {
			this.getUserInfo();
			this.getAchievements();
			this.getRecentOrders();
			this.getEnvironmentalTip();
		},
		// 更新登录状态
		updateLoginStatus() {
			this.isLoggedIn = isLoggedIn();
			if (this.isLoggedIn) {
				this.userInfo = getUserInfo();
			} else {
				this.userInfo = null;
			}
		},
		// 跳转到回收页面（无需登录）
		goToRecycle() {
			uni.switchTab({
				url: '/pages/recycle/index'
			});
		},
		// 查看订单（需要登录）
		viewOrders() {
			this.withAuth(() => {
				uni.navigateTo({
					url: '/pages/recycle/order-detail'
				});
			})();
		},
		// 查看积分详情（需要登录）
		viewPointsDetail() {
			this.withAuth(() => {
				uni.navigateTo({
					url: '/pages/points/detail'
				});
			})();
		},
		// 导航到指定页面
		navigateTo(url) {
			uni.navigateTo({
				url
			});
		},
		// 切换底部导航栏
		switchTab(url) {
			this.handleTabClick(url);
		},
		// 查看分类详情
		showCategoryDetail(category) {
			this.navigateTo(`/pages/categories/detail?name=${category.name}`);
		},
		// 查看订单详情
		viewOrderDetail(order) {
			this.navigateTo(`/pages/recycle/order-detail?id=${order.orderNo}`);
		},
		// 获取用户信息
		getUserInfo() {
			// TODO: 实际项目中应调用API获取数据
			console.log('获取用户信息');
		},
		// 获取环保成果数据
		getAchievements() {
			// TODO: 实际项目中应调用API获取数据
			console.log('获取环保成果数据');
		},
		// 获取最近订单
		getRecentOrders() {
			// TODO: 实际项目中应调用API获取数据
			console.log('获取最近订单数据');
		},
		// 获取环保小知识
		getEnvironmentalTip() {
			// TODO: 实际项目中应调用API获取数据
			console.log('获取环保小知识');
		},
		// 处理TabBar点击
		handleTabClick(url) {
			if (url.includes('/pages/profile/index')) {
				// 如果是个人中心页面，先检查登录状态
				if (!this.isLoggedIn) {
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					});

					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/login/index?from=profile'
						});
					}, 1500);

					return;
				}
			}

			// 其他页面或已登录，直接跳转
			uni.switchTab({
				url
			});
		}
	}
};
</script>

<style lang="scss">
@import '../../styles/global.scss';

// 页面背景
page {
	background-color: $bg-color;
	padding-bottom: 100rpx; // 为底部导航留出空间
}

// 顶部导航栏
.header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20rpx 30rpx;
	background-color: $card-bg;

	.logo {
		.logo-text {
			font-size: 34rpx;
			font-weight: bold;
			color: $primary-green;
		}
	}

	.avatar {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		overflow: hidden;

		image {
			width: 100%;
			height: 100%;
		}
	}
}

// 横幅区域
.banner {
	width: calc(100% - 40rpx);
	margin: 0 20rpx;
	background: linear-gradient(90deg, $primary-green, $secondary-green);
	border-radius: 15rpx;
	overflow: hidden;
	padding: 30rpx;
	color: $text-white;
	box-sizing: border-box;

	.banner-content {
		padding: 20rpx 0;
	}

	.banner-title {
		font-size: 36rpx;
		font-weight: bold;
		margin-bottom: 10rpx;
	}

	.banner-subtitle {
		font-size: 26rpx;
		opacity: 0.9;
	}
}

// 功能入口网格
.action-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: repeat(2, 1fr);
	gap: 20rpx;
	padding: 30rpx;
	margin-top: -20rpx;
}

.action-item {
	background-color: $card-bg;
	border-radius: 15rpx;
	box-shadow: $button-shadow;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 30rpx 0;

	.action-icon-bg {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		background-color: $light-green;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 15rpx;
	}

	.action-icon {
		width: 40rpx;
		height: 40rpx;
	}

	.action-text {
		font-size: 28rpx;
		color: $text-black;
	}
}

// 内容部分
.section {
	margin: 0 30rpx 30rpx;
	background-color: $card-bg;
	border-radius: 15rpx;
	padding: 30rpx;
	box-shadow: $card-shadow;
}

.section-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 30rpx;
}

.section-title {
	font-size: 32rpx;
	font-weight: bold;
	color: $text-black;
	position: relative;
	padding-left: 20rpx;

	&::before {
		content: '';
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
		width: 6rpx;
		height: 30rpx;
		background-color: $primary-green;
		border-radius: 3rpx;
	}
}

.section-more {
	display: flex;
	align-items: center;

	.more-text {
		font-size: 26rpx;
		color: $text-light-gray;
	}

	.more-icon {
		font-size: 26rpx;
		color: $text-light-gray;
		margin-left: 6rpx;
	}
}

// 回收分类
.category-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20rpx;
}

.category-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	.category-icon-bg {
		width: 80rpx;
		height: 80rpx;
		border-radius: 10rpx;
		background-color: $card-bg;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 10rpx;
		border: 1px solid $border-color;
	}

	.category-icon {
		width: 50rpx;
		height: 50rpx;
	}

	.category-name {
		font-size: 24rpx;
		color: $text-gray;
	}
}

// 用户成就数据
.achievements-section {
	margin-bottom: 30rpx;
}

.achievements-list {
	display: flex;
	flex-direction: column;
	gap: 20rpx;
}

.achievement-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border-right: 1px solid $border-light;
	padding: 20rpx 0;

	&:last-child {
		border-right: none;
	}

	.achievement-value {
		font-size: 36rpx;
		font-weight: bold;
		color: $primary-green;
		margin-bottom: 10rpx;
	}

	.achievement-label {
		font-size: 24rpx;
		color: $text-gray;
	}
}

// 最近订单
.recent-orders-section {
	margin-bottom: 30rpx;
}

.recent-orders-list {
	display: flex;
	flex-direction: column;
	gap: 20rpx;
}

.order-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border: 1rpx solid $border-color;
	border-radius: 10rpx;
	padding: 20rpx;
}

.order-info {
	display: flex;
	align-items: center;
	margin-bottom: 15rpx;
}

.order-id {
	color: $text-black;
	font-size: 26rpx;
	min-width: 120rpx;
}

.order-status {
	font-size: 24rpx;
	padding: 4rpx 12rpx;
	border-radius: 6rpx;
	margin-left: auto;

	&.status-processing {
		background-color: $status-processing-bg;
		color: $status-processing-text;
	}

	&.status-completed {
		background-color: $status-completed-bg;
		color: $status-completed-text;
	}
}

.order-detail {
	display: flex;
	align-items: center;
	margin-top: 10rpx;
}

.order-date {
	color: $text-light-gray;
	font-size: 26rpx;
	margin-right: 10rpx;
}

.order-points {
	margin-left: auto;
	font-size: 28rpx;
	font-weight: bold;
	color: $points-orange;
}

.empty-orders {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 30rpx;
}

.empty-text {
	color: $text-gray;
	font-size: 26rpx;
	margin-bottom: 20rpx;
}

.recycle-now-btn {
	background-color: $primary-green;
	color: $text-white;
	font-size: 28rpx;
	padding: 12rpx 30rpx;
	border-radius: 30rpx;
	margin-top: 20rpx;
	box-shadow: $button-shadow;
}

.not-logged-in-tip {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 30rpx;
	background-color: #f8f8f8;
	border-radius: 10rpx;
}

.tip-text {
	color: $text-gray;
	font-size: 26rpx;
	margin-bottom: 20rpx;
}

.login-btn {
	background-color: $primary-green;
	color: $text-white;
	font-size: 28rpx;
	padding: 12rpx 30rpx;
	border-radius: 30rpx;
	box-shadow: $button-shadow;
}

// 环保小知识
// 底部导航栏
.tabbar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100rpx;
	background-color: $card-bg;
	display: flex;
	justify-content: space-around;
	align-items: center;
	border-top: 1rpx solid $border-color;
	z-index: 100;
}

.tab-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	flex: 1;

	.tab-icon {
		width: 40rpx;
		height: 40rpx;
		margin-bottom: 5rpx;
	}

	.tab-text {
		font-size: 24rpx;
		color: $text-gray;
	}

	&.active {
		.tab-icon {
			color: $primary-green;
		}

		.tab-text {
			color: $primary-green;
		}
	}
}

.action-grid .grid-item .item-content {
	background-color: $card-bg;
	border-radius: 16rpx;
	text-align: center;
	padding: 20rpx;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	box-shadow: $button-shadow;
}

.recycle-button {
	background-color: $primary-green;
	color: $text-white;
	font-size: 28rpx;
	padding: 12rpx 30rpx;
	border-radius: 30rpx;
	margin-top: 20rpx;
	box-shadow: $button-shadow;
}
</style>
